<template>
  <cube-page type="button-view" title="上传证据">
    <div slot="content">
      <div class="imgList" :style="{'height': getlistHeight}">
        <p>图片大小请控制在500k以下，最多只能传5张: </p>
        <cube-upload
          class="uploadBtn"
          ref="upload"
          v-model="files"
          :action="action"
          @files-added="addedHandler"
          @file-success="successHandler"
          @file-error="errHandler">
          <div class="clear-fix">
            <cube-upload-btn :multiple="false">
              <cube-button :primary="true" class="zbtn zuiReplayBtn one">上传证据</cube-button>
            </cube-upload-btn>
          </div>
        </cube-upload>
        <div class="imgWrap">
          <div class="view-wrapper">
            <div class="imgs-container">
              <div class="imgInnerWrap" v-for="(img, index) in filesL" :key="img.id" @click="handleImgsClick(index)">
                <img :src="img.url">
              </div>
            </div>
            <div class="tips">点击图片预览</div>
          </div>
        </div>
      </div>
    </div>
  </cube-page>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import CubePage from '@/components/cube-page'
import CubeView from '@/components/cube-view'

export default {
  name: 'ProjectImgS',
  components: {
    CubeView,
    CubePage
  },
  computed: {
    ...mapState(['loginUserInfo']),
    remainLen () {
      if(!this.filesL || !this.filesL.length)
        return 5;
      return (5 - this.filesL.length) || 0;
    }
  },
  data () {
    return {
      showLoading: true,
      tableData: [],
      getlistHeight: this.zutil.getlistHeight(44),
      projectInfo: null,
      imgList: [],
      action: {
        target: 'http://127.0.0.1:8081/app/api/uploadPic',
        data: {}
      },
      files: [],
      filesL: [],
      zuploadLoading: null,
      curUploadObj: null
    }
  },
  created () {

  },
  mounted() {
    let projectInfo = this.zutil.lStorage.getParam('lst_projectBaseInfoDetail');
    if(projectInfo){
      projectInfo = JSON.parse(projectInfo);
      this.projectInfo = projectInfo;
      this.filesL = projectInfo.imgList || [];

    }else{
      this.$createToast({type: 'error', time: 1000, txt: "未获取到项目id！"}).show();
      setTimeout(()=>{
        this.$router.back();
      }, 1000)
    }
  },
  watch: {

  },
  methods: {
    ...mapMutations(['setW_shortageData']),
    addedHandler() {
      if(!this.remainLen){
        this.$createToast({type: 'error', time: 2000, txt: `只能再上传${this.remainLen}张图片`}).show();
        return false;
      }
      this.action.data.id = this.projectInfo.id;
      this.zuploadLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      this.zuploadLoading.show();
    },
    successHandler(file) {
      // 测试，需删
      // file.response = {
      //   code: '0000'
      // }

      console.info(file);
      this.zuploadLoading.hide();
      if(file.response.code == '0000'){
        this.$createToast({
          txt: '证据上传成功',
          type: 'correct'
        }).show();
        // let _temp = {
        //   url: 'http://www.dapenti.com:88/dapenti/7ca0852c/06b1ae7d.jpg',
        //   id: 'test'
        // }
        this.filesL.push(file.response.data);
      }else{
        this.$createToast({type: 'error', time: 2000, txt: file.response.message || "上传失败！"}).show();
      }
    },
    errHandler(file) {
      this.$createToast({type: 'error', time: 2000, txt: file.response.message || "上传失败！"}).show();
      this.zuploadLoading.hide();
    },
    handleImgsClick(index) {
      this.initialIndex = index;
      let urls = [];
      this.filesL.forEach(v=>{
        urls.push(v.url);
      })
      const params = {
        $props: {
          imgs: urls,
          initialIndex: 'initialIndex', // 响应式数据的key名
          loop: true
        },
        $events: {
          change: (i) => {
            // 必须更新 initialIndex
            this.initialIndex = i
          }
        }
      }
      this.$createImagePreview({ ...params }).show()
    }
  }
}
</script>

<style scoped lang="scss">

.imgList {
  background: #f0f0f0;
  p {
    font-size: 16px;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    background: #ededed;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
  }
  .uploadBtn {
    margin: 0 20px;
  }
  .imgWrap {
    padding: 0 10px;
    margin-top: 20px;
    .tips {
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 13px;
    }
    .imgs-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .imgInnerWrap {
        width: 48%;
        padding: 10px;
        background: #fff;
        margin-bottom: 4%;
        border-radius: 5px;
        img {
          width: 100%;
        }
      }
    }
  }
}

</style>
